<template>
	<view class="pages">
		<view class="box">
			<view class="left-box">
				<scroll-view scroll-y class="scroll">
					<view class="left-box-item" v-for="(item, index) in list" :key="item.id" :class="item.isCheck ? 'active' : ''" @click="leftClick(item, index)">
						<text>{{ item.departmentName }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="right-box">
				<scroll-view scroll-y class="scroll">
					<view class="right-box-item" v-for="(item, index) in details" :key="index" @click="to('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
						<text>{{ item.groupName }}</text>
						<view @click.stop="item.status != 1 ? join(item.id) : ''" class="icon" :class="item.status != 1 ? 'no-join' : ''">
							{{ item.status == 1 ? '已加入' : '加入' }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { getListByTree, getListByUserId, Unitcircle, userJoinGroup } from '../../../apis/request.js';
import sidebar from '../../../components/sidebar.vue';
export default {
	components: {
		sidebar
	},
	data() {
		return {
			list: [
				{
					departmentName: '我的圈子',
					id: '',
					isCheck: true
				}
			],
			details: [],
			userId: 0
		};
	},
	methods: {
		to(url) {
			uni.navigateTo({
				url
			});
		},
		leftClick(item, index) {
			this.list.forEach(item => {
				item.isCheck = false;
			});
			item.isCheck = true;
			this.select(item.id);
		},
		async getList() {
			// 获取左边列表
			const list = await getListByTree();

			this.list.push(
				...list.map(item => {
					return {
						...item,
						isCheck: false
					};
				})
			);
		},
		async select(e) {
			this.details = [];
			if (!e) {
				// id为空---我的圈子
				this.details = await getListByUserId({
					userId: this.userId
				});
			} else {
				this.details = await Unitcircle({
					departmentId: e,
					userId: this.userId
				});
			}
		},
		join(id) {
			// #ifdef MP-WEIXIN
			uni.requestSubscribeMessage({
				tmplIds: ['XiST2JTtF1dTmwy14tq8-QqJPlUQ6kzKYMUzG6BBmD0']
			});
			// #endif
			userJoinGroup({
				groupId: id,
				userId: this.userId
			}).then(res => {
				uni.showToast({
					title: '成功'
				});
			});
		}
	},
	onLoad() {
		this.select('');
		this.getList();
		const { id } = uni.getStorageSync('userInfo');
		this.userId = id;
		this.leftClick(this.list[0], 0);
	}
};
</script>

<style lang="scss" scoped>
.box {
	height: 100vh;
	display: flex;

	.left-box {
		width: 30%;
		height: 100%;

		.scroll {
			height: 100%;
			display: flex;
			text-align: center;
			transition: 0.3s all;

			.left-box-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				background-color: #f1f1f1;
				color: #333333;
				border-bottom: 1rpx solid #e1e1e1;
				transition: 0.3s all;
			}

			.active {
				color: #32C59A;
				background-color: #ffffff;
				position: relative;
				transition: 0.3s all;

				&::before {
					position: absolute;
					content: ' ';
					height: 40rpx;
					width: 8rpx;
					background-color: #32C59A;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.right-box {
		width: 70%;
		height: 100%;

		.scroll {
			height: 100%;
			display: flex;
			text-align: center;

			.right-box-item {
				height: 120rpx;
				justify-content: space-between;
				padding: 0 20rpx;
				border-bottom: 1rpx solid #f1f1f1;
				display: flex;
				align-items: center;

				> text {
					width: 342rpx;
					text-align: left;
				}

				.icon {
					width: 100rpx;
					height: 35rpx;
					border-radius: 50rpx;
					text-align: center;
					padding: 10rpx;
					color: #999999;
					border: 1rpx solid #dcdcdc;
					line-height: 33rpx;
					font-size: 27rpx;
				}

				.no-join {
					color: #32C59A;
					border: 1rpx solid #32C59A;
				}
			}
		}
	}
}
</style>
